<template>
	<!-- 萌宠时光机 -->
	<div class="bgc">
		<u-sticky offset-top="0" v-if="isoffset">
			<view class="infoimg" >
				<view class="infoitem">
					<img mode="fade" class="imags" src="@/static/images/logtxt.png" alt="">
				</view>
			</view>
		</u-sticky>
		<u-toast ref="uToast"></u-toast>
		<view class="topimg">
			<view class="log">
				<img class="img" src="@/static/images/logo.png" alt="">
			</view>
			
		</view>
		<view class="content">
		<!-- 	<view class="text-area">
				<view class="title" @click="addpet">添加宠物</view>
				<view class="title">萌宠时光机</view>
				<view class="title" @click="toknowledge(0)">健康宠物小课堂</view>
				<view class="title" @click="toknowledge(0)">新手专区</view>
			</view> -->
		</view>
		<!-- 内容开始 -->
		<view v-if="!ispetlist">
			<view class="startCenter">
				<view class="titles">
					我的宠物
				</view>
				<view class="addpet">
					<view class="addpetinfo">
						<view class="addflex">
							<view class="addfelxinfo" @click="addpet">
								<view class="catadbox">
									<img class="catad" src="@/static/images/catad.png">
								</view>
								<view class="text">添加宠物</view>
							</view>
						</view>
						<view class="addftxt">建立一份陪伴你一生的宠物档案吧～</view>
					</view>
				</view>
			</view>
			<!-- 绘画馆知识库 -->
			<view class="drawtab">
				<view class="flexgrid">
					<view class="tab1" @click="toDraw">
						<view class="tableft">
							<view class="title">绘画馆</view>
							<view class="subtitle">补充说明补充</view>
						</view>
						<view class="tableright">
							<img class="imgs" src="@/static/images/drawimgs.png" alt="">
						</view>
					</view>
					<view class="tab1" @click="toknowledge">
						<view class="tableft">
							<view class="title">知识库</view>
							<view class="subtitle">补充说明补充</view>
						</view>
						<view class="tableright tableleft">
							<img class="imgs" src="@/static/images/book.png" alt="">
						</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="listtitle">
					模块标题
				</view>
				<view class="listgrid">
					<view class="gridbox" v-for="i in 9">
						<view class="listimg">
							<img class="liimage" src="https://tenfei03.cfp.cn/creative/vcg/800/new/VCG211454662865.jpg" alt="">
						</view>
						<view class="listti">标题标题标题标题标题 </view>
						<view class="listsuti">补充说明八字</view>
					</view>
				</view>
			</view>
	
		</view>
		<view v-else>
			<mypetinfo ref="mypet" :pettablist="poplist" @onadd="onaddfn"></mypetinfo>
		</view>
		<u-popup :show="isauth" :overlay="true" @close="onclose">
			<view style="padding: 60rpx 24rpx 40rpx 24rpx;">
				<up-button  type="primary" size="large" color="#DEA89C" :shape="'circle'" text="请授权登录" @click="login"></up-button>
			</view>
		</u-popup>
	</div>
	
</template>

<script>
	import mypetinfo from "./info/mypetinfo.vue"
	import {getlogin,getcurrentpetnnfo} from "@/pages/api/apihost.js"
	import mixins from "@/pages/mxin/mxin.js"
	export default {
		mixins:[mixins],
		components:{
			mypetinfo
		},
		data() {
			return {
				title: '',
				isoffset:false,
				ispetlist:false,
				poplist:[]
			}
		},
		onPageScroll(e){
			if(e.scrollTop>80){
				this.isoffset=true
			} else{
				this.isoffset=false
			}
		},
		onShow() {
			// this.getcode()
			this.getpetlist()
		},
		methods: {
			getmixlist(){
				this.getpetlist()
			},
			onaddfn() {
				this.ispetlist=false
			},
			getpetlist(){
				getcurrentpetnnfo().then(r=>{
					if(r.code==401 ||r.code==403){
						uni.setStorageSync("token", '')
						// this.login()
						return
					}
					if(r.length){
						this.ispetlist=true
						this.poplist=r
						setTimeout(()=>{
							this.$refs.mypet.getpetinfo(r)
						})
					
					} else{
						this.ispetlist=false
					}
					console.log(r, 'mypetlist')
				})
			},
			getcode() {
				let t=this
				wx.getUserProfile({
					success:(r)=>{
						console.log(r, 'rrrr===')
						
						uni.setStorageSync('islogin', true);
					},
					fail:(e)=>{
						uni.setStorageSync("islogin",false)
					}
				})
				// getlogin().then(r=>{
				// 	console.log(r, 'rrrr===')
				// })
			},
			addpet() {
				console.log(this.getstore('token'), 'token')
				if(this.getstore('token')){
					uni.navigateTo({
						url: "/petselfinfo/mypet"
					})
				} else{
					this.setauth()
					// this.$refs.uToast.show({
					// 	message:'请先登录'
					// })
					// uni.navigateTo({
					// 	url: "/petselfinfo/mypet"
					// })
				}
				
			},
			toDraw(){
				uni.switchTab({
					url: `/pages/petdraw/index`
				})
			},
			toknowledge(v) {
				uni.switchTab({
					url: `/pages/petknowledge/index?selecttab=${v}`
				})
			}
		},
	}
</script>

<style lang="scss">
	.list{
		padding: 60rpx 30rpx 120rpx 30rpx;
		.listtitle{
			font-family: PingFangSC-Semibold;
			font-size: 40rpx;
			color: #333333;
			letter-spacing: 0;
			line-height: 40rpx;
			font-weight: 600;
			padding-bottom: 30rpx;
		}
		.listti{
			font-family: PingFangSC-Medium;
			font-size: 28rpx;
			color: #333333;
			letter-spacing: 0;
			line-height: 28rpx;
			font-weight: 500;
			padding: 24rpx 16rpx 16rpx 16rpx;
		}
		.listsuti{
			font-family: PingFangSC-Regular;
			font-size: 24rpx;
			color: #858585;
			letter-spacing: 0;
			line-height: 24rpx;
			font-weight: 400;
			padding: 0rpx 16rpx 24rpx 16rpx;
		}
		.gridbox{
			background: #F7ECE5;
			border-radius: 24rpx;
		}
		.listgrid{
			display: grid;
			grid-template-columns: auto auto;
			grid-gap:24rpx 24rpx ;
			.listimg{
				padding-top: 16rpx;
				border-radius: 16rpx;
				overflow: hidden;
				text-align: center;
				.liimage{
					width: 301rpx;
					height: 301rpx;
					border-radius: 16rpx;
				}
			}
		}
	}
	.bgc{
		background: #f7f7f7;
	}
	.topimg{
		width: 100%;
		height: 241rpx;
		background:url("https://pet-oss-bucket.oss-cn-beijing.aliyuncs.com/pet/2023/10/14/bg1_20231014083554A001.png");
		background-size: 100% auto;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 80rpx;
		.log{
			width: 331rpx;
			height: 121rpx;
			margin-top: 130rpx;
			.img{
				width: 331rpx;
				height: 121rpx;
			}
		}
	}
	.infoimg{
		width: 100%;
		height: 120rpx;
		background-image: url("https://pet-oss-bucket.oss-cn-beijing.aliyuncs.com/pet/2023/10/14/bg1_20231014083554A001.png");
		background-size: 100% auto;
		.infoitem{
			padding-top: 56rpx;
			padding-left: 31rpx;
			.imags{
				width: 215rpx;
				height: 48rpx;
			}
		}
	}
	.content {
		height: 40rpx;
		background-image: url("@/static/images/bg2.png");
		background-size: 100% auto;
		position: relative;
		top: -20rpx;
		// bac
		// height: 500vh;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
		display: block;
		text-align: center;
	}
	.startCenter{
		font-size: 40rpx;
		padding-top: 33rpx;
		color: #333333;
		line-height: 40rpx;
		font-weight: 600;
		.titles{
			padding-left: 30rpx;
			padding-bottom: 33rpx;
		}
	}
	.addpet{
		padding: 0rpx 30rpx 0rpx 30rpx;
		.addpetinfo{
			background: url('@/static/images/card.png');
			background-repeat: no-repeat;
			background-size: 100% auto;
			position: relative;
			.addftxt{
				padding-top: 36rpx;
				opacity: 0.8;
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: #FFFFFF;
				letter-spacing: 0;
				text-align: center;
				line-height: 32rpx;
				font-weight: 400;
				padding-bottom: 60rpx;
			}
		}
		.addpetinfo::after{
			position: absolute;
			top: -85rpx;
			right: 20rpx;
			display: block;
			content: '';
			width: 173rpx;
			height: 134rpx;
			background: url('@/static/images/dog.png');
			background-size: 173rpx auto;
			background-repeat: no-repeat;
		}
	}
	.addflex{
		display: flex;
		justify-content: center;
		padding-top: 64rpx;
		.addfelxinfo{
			display: flex;
			align-items: center;
			padding: 17rpx 71rpx;
			border: 2rpx dashed #fff;
			border-radius: 16rpx;
			.catadbox{
				.catad{
					display: block;
					width: 54rpx;
					height: 54rpx;
				}
			}
			.text{
				font-family: PingFangSC-Semibold;
				font-size: 36rpx;
				color: #fff;
				font-weight: 600;
				padding-left: 18rpx;
			}
			
		}
		
	}
	.flexgrid{
		display: grid;
		padding: 24rpx 30rpx 0rpx 30rpx;
		grid-template-columns: auto auto;
		grid-gap: 0rpx 18rpx;
	}
	.tab1{
		display: flex;
		border: 1rpx solid #DEA89C;
		background: #F7ECE5 ;
		border-radius: 24rpx;
		.tableft{
			padding: 53rpx 30rpx;
			.title{
				font-family: PingFangSC-Semibold;
				font-size: 32rpx;
				color: #333333;
				letter-spacing: 0;
				line-height: 32rpx;
				font-weight: 600;
				text-align: left;
			}
			.subtitle{
				padding-top: 20rpx;
				font-family: PingFangSC-Regular;
				font-size: 26rpx;
				color: #858585;
				letter-spacing: 0;
				line-height: 32rpx;
				font-weight: 400;
			}
		}
		.tableright{
			display: flex;
			align-items: center;
			position: relative;
			.imgs{
				position: absolute;
				left: -20rpx;
				width: 128rpx;
				height: 128rpx
			}
		}
		.tableleft{
			.imgs{
				position: absolute;
				left: -25rpx;
				width: 128rpx;
				height: 90rpx;
			}
		}
	
	}
</style>